<template>
	<div class="account_safe_container">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane label="密码规则" name="passRules"></el-tab-pane>
			<el-tab-pane label="强制修改密码" name="forceModifyPass"></el-tab-pane>
			<el-tab-pane label="定时强制修改密码" name="timeForceModifyPass"></el-tab-pane>
			<el-tab-pane label="超期未登录账号禁用" name="overdueAccountDisabled"></el-tab-pane>
		</el-tabs>
		<component :is="activeName"></component>
	</div>
</template>

<script>
import passRules from './passRules';
import forceModifyPass from './forceModifyPass';
import timeForceModifyPass from './timeForceModifyPass';
import overdueAccountDisabled from './overdueAccountDisabled';
export default {
	components: {
		passRules,
		forceModifyPass,
		timeForceModifyPass,
		overdueAccountDisabled
	},
	data() {
		return {
			activeName: 'passRules'
		};
	}
};
</script>

<style lang="scss" scoped>
.account_safe_container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	.el-tabs {
		flex-shrink: 0;
	}
	&:deep(.el-tabs__header) {
		margin-bottom: 0;
		background-color: var(--primary-background-plain-disabled);
	}
	&:deep(.el-tabs__nav) {
		border-top: none;
		border-left: none;
	}
	&:deep(.el-tabs__item) {
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		&.is-active {
			font-weight: bold;
			background-color: #fff;
		}
	}
}
</style>
